// 菜单切换功能
const menuItems = document.querySelectorAll('.menu-item');
const submenuItems = document.querySelectorAll('.submenu-item');
const currentMenuTitle = document.querySelector('#current-menu .title');

// 轮播图功能
let currentSlide = 0;
const slides = document.querySelectorAll('.carousel-slide');
const indicators = document.querySelectorAll('.indicator');

function showSlide(index) {
    // 隐藏所有幻灯片
    slides.forEach(slide => slide.classList.remove('active'));
    // 显示指定幻灯片
    slides[index].classList.add('active');

    // 更新指示器
    indicators.forEach(indicator => indicator.classList.remove('active'));
    indicators[index].classList.add('active');

    currentSlide = index;
}

function nextSlide() {
    currentSlide = (currentSlide + 1) % slides.length;
    showSlide(currentSlide);
}

// 自动播放
let slideInterval = setInterval(nextSlide, 3000);

// 指示器点击事件
indicators.forEach((indicator, index) => {
    indicator.addEventListener('click', () => {
        clearInterval(slideInterval);
        showSlide(index);
        slideInterval = setInterval(nextSlide, 3000);
    });
});

// 初始化显示第一张幻灯片
showSlide(currentSlide);

// submenu 显示控制
let activeSubmenu = null;

// 树形菜单功能
const treeItems = document.querySelectorAll('.tree-item');
const treeTexts = document.querySelectorAll('.tree-text');


// 初始化
function init() {
    // 菜单点击事件
    menuItems.forEach(item => {
        item.addEventListener('click', function (e) {
            // 移除所有菜单项的激活状态
            menuItems.forEach(i => i.classList.remove('active'));

            // 添加当前点击项的激活状态
            this.classList.add('active');

            // 显示 submenu（如果存在）
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                // 隐藏之前激活的 submenu
                if (activeSubmenu && activeSubmenu !== submenu) {
                    activeSubmenu.style.display = 'none';
                }

                // 显示当前 submenu
                submenu.style.display = 'flex';
                activeSubmenu = submenu;
            } else {
                // 如果点击的菜单项没有 submenu，隐藏所有 submenu
                document.querySelectorAll('.submenu').forEach(sub => {
                    sub.style.display = 'none';
                });
                activeSubmenu = null;
            }



            // 更新列表数据
            updateList();
        });

        // 鼠标移入事件
        item.addEventListener('mouseenter', function () {
            // 隐藏所有已激活的 submenu
            if (activeSubmenu) {
                activeSubmenu.style.display = 'none';
                activeSubmenu = null;
            }

            // 显示当前菜单项的 submenu（如果存在）
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = 'flex';
                activeSubmenu = submenu;
            }
        });

        // 鼠标移出事件
        item.addEventListener('mouseleave', function (e) {
            // 检查鼠标是否移向 submenu
            const submenu = this.querySelector('.submenu');
            if (submenu && activeSubmenu === submenu) {
                // 使用 setTimeout 来处理鼠标移出到 submenu 的情况
                setTimeout(() => {
                    if (!submenu.matches(':hover')) {
                        submenu.style.display = 'none';
                        if (activeSubmenu === submenu) {
                            activeSubmenu = null;
                        }
                    }
                }, 100);
            }
        });
    });

    // 二级菜单点击事件
    submenuItems.forEach(item => {
        item.addEventListener('click', function (e) {
            e.stopPropagation(); // 阻止事件冒泡

            // 移除所有菜单项的激活状态
            menuItems.forEach(i => i.classList.remove('active'));

            // 添加父级菜单项的激活状态
            this.closest('.menu-item').classList.add('active');

            // 更新当前菜单显示
            const submenuText = this.textContent;
            if (submenuText) {
                currentMenuTitle.textContent = submenuText;
            }

            // 根据submenu-item关联tree-item和右侧内容
            const submenuType = this.dataset.submenu;
            let targetTreeType = '';
            // 建立submenu-item与tree-item的映射关系
            // 观展预约 -> 馆藏介绍
            if (submenuType === 'overview2') {
                targetTreeType = 'exhibition';
            }
            // 咨询留言 -> 查档指南
            else if (submenuType === 'overview1') {
                targetTreeType = 'inquiry';
            }

            // 页面跳转逻辑
            let targetUrl = '';
            if (submenuType === 'status1') {
                targetUrl = '../work-status/index.html?type=exhibition';
            } else if (submenuType === 'statu2') {
                targetUrl = '../work-status/index.html?type=inquiry';
            } else if (submenuType === 'service4') {
                targetUrl = '../public-service/index.html?type=exhibition';
            } else if (submenuType === 'service5') {
                targetUrl = '../public-service/index.html?type=inquiry';
            } else if (submenuType === 'service1') {
                targetUrl = '../public-service/index.html?type=reservation';
            } else if (submenuType === 'service2') {
                targetUrl = '../public-service/index.html?type=message';
            } else if (submenuType === 'service3') {
                targetUrl = '../public-service/index.html?type=donation';
            } else if (submenuType === 'overview1') {
                targetUrl = '../archival-collections/index.html?type=inquiry';
            } else if (submenuType === 'overview2') {
                targetUrl = '../archival-collections/index.html?type=exhibition';
            } else if (submenuType === 'culture1') {
                targetUrl = '../chronicle-culture/index.html?type=exhibition';
            } else if (submenuType === 'culture2') {
                targetUrl = '../chronicle-culture/index.html?type=inquiry';
            }

            // 如果有目标URL，则跳转到对应页面
            if (targetUrl) {
                window.location.href = targetUrl;
                return;
            }

            // 如果找到了对应的tree-item，更新其选中状态
            if (targetTreeType) {
                const targetTreeItem = document.querySelector(`.tree-item[data-tree="${targetTreeType}"]`);
                if (targetTreeItem) {
                    // 移除所有树项的选中状态
                    treeItems.forEach(i => i.classList.remove('selected'));
                    // 添加目标树项的选中状态
                    targetTreeItem.classList.add('selected');
                }

                // 根据关联的tree-item显示对应的右侧内容
                const collectionContainer = document.querySelector('.collection-container');
                const guideContainer = document.querySelector('.uni-intro');

                // 默认隐藏所有容器
                if (collectionContainer) collectionContainer.style.display = 'none';
                if (guideContainer) guideContainer.style.display = 'none';
                // 根据关联的tree-item显示对应的容器
                if (targetTreeType === 'exhibition') { // 馆藏介绍
                    if (collectionContainer) collectionContainer.style.display = 'block';
                } else if (targetTreeType === 'inquiry') { // 查档指南
                    if (guideContainer) {
                        guideContainer.style.display = 'block';

                        // 根据submenu-item类型显示不同的guide-content内容
                        const guideContentInquiry = document.getElementById('guide-content-inquiry');
                        const guideContentService2 = document.getElementById('guide-content-service2');

                        if (guideContentInquiry && guideContentService2) {
                            // 默认隐藏所有guide-content子内容
                            guideContentInquiry.style.display = 'none';
                            guideContentService2.style.display = 'none';

                            // 根据submenu-item类型显示对应的内容
                            if (submenuType === 'service2') { // 咨询留言
                                guideContentService2.style.display = 'block';
                            } else {
                                guideContentInquiry.style.display = 'block'; // 默认显示查档指南
                            }
                        }
                    }
                }
            }
        });
    });

    // 树形菜单点击事件
    treeTexts.forEach(item => {
        item.addEventListener('click', function () {
            // 移除所有树项的选中状态
            treeItems.forEach(i => i.classList.remove('selected'));
            // 添加当前点击项的选中状态
            this.parentElement.classList.add('selected');

            // 更新当前菜单显示
            const treeText = this.textContent;
            if (treeText) {
                currentMenuTitle.textContent = treeText;
            }

            // 获取当前点击项的数据属性
            const treeItem = this.parentElement;
            const treeType = treeItem.dataset.tree;

            // 根据点击的菜单项显示或隐藏对应的容器
            const collectionContainer = document.querySelector('.collection-container');
            const guideContainer = document.querySelector('.guide-container');
            const uniIntroContainer = document.querySelector('.uni-intro');

            // 默认隐藏所有容器
            if (collectionContainer) collectionContainer.style.display = 'none';
            if (guideContainer) guideContainer.style.display = 'none';
            if (uniIntroContainer) uniIntroContainer.style.display = 'none';
            // 根据点击的菜单项显示对应的容器
            if (treeType === 'exhibition') { // 馆藏介绍
                if (collectionContainer) collectionContainer.style.display = 'block';
            } else if (treeType === 'inquiry') { // 单位概况
                if (uniIntroContainer) uniIntroContainer.style.display = 'block';
            }
        });
    });

    // 初始化显示：根据默认选中的tree-item显示对应的容器
    const collectionContainer = document.querySelector('.collection-container');
    const guideContainer = document.querySelector('.guide-container');
    const uniIntroContainer = document.querySelector('.uni-intro');

    // 默认隐藏所有容器
    if (collectionContainer) collectionContainer.style.display = 'none';
    if (guideContainer) guideContainer.style.display = 'none';
    if (uniIntroContainer) uniIntroContainer.style.display = 'none';

    // 获取默认选中的tree-item
    const defaultSelectedTreeItem = document.querySelector('.tree-item.selected');
    if (defaultSelectedTreeItem) {
        const defaultTreeType = defaultSelectedTreeItem.dataset.tree;
        // 根据默认选中的tree-item显示对应的容器
        if (defaultTreeType === 'exhibition') { // 馆藏介绍
            if (collectionContainer) collectionContainer.style.display = 'block';
        } else if (defaultTreeType === 'inquiry') { // 单位概况
            if (uniIntroContainer) uniIntroContainer.style.display = 'block';
        }
    } else {
        // 如果没有默认选中的tree-item，则默认显示馆藏介绍
        if (collectionContainer) collectionContainer.style.display = 'block';
    }



}



// 点击页面其他地方隐藏 submenu
function hideSubmenuOnClickOutside(e) {
    if (activeSubmenu && !activeSubmenu.contains(e.target) && !e.target.closest('.has-submenu')) {
        activeSubmenu.style.display = 'none';
        activeSubmenu = null;
    }
}

document.addEventListener('click', hideSubmenuOnClickOutside);

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function () {
    init();

    // 获取URL参数
    const urlParams = new URLSearchParams(window.location.search);
    const contentType = urlParams.get('type');

    // 如果URL参数存在，则根据参数更新树形菜单和内容显示
    if (contentType) {
        // 获取对应类型的tree-item
        const targetTreeItem = document.querySelector(`.tree-item[data-tree="${contentType}"]`);
        if (targetTreeItem) {
            // 移除所有树项的选中状态
            treeItems.forEach(i => i.classList.remove('selected'));
            // 添加目标树项的选中状态
            targetTreeItem.classList.add('selected');

            // 更新当前菜单显示
            const treeText = targetTreeItem.querySelector('.tree-text').textContent;
            if (treeText) {
                currentMenuTitle.textContent = treeText;
            }
        }
    }

    // 初始化树形菜单显示
    const selectedTreeItem = document.querySelector('.tree-item.selected');
    if (selectedTreeItem) {
        const treeType = selectedTreeItem.dataset.tree;
        const collectionContainer = document.querySelector('.collection-container');
        const guideContainer = document.querySelector('.guide-container');
        const uniIntroContainer = document.querySelector('.uni-intro');

        // 默认隐藏所有容器
        if (collectionContainer) collectionContainer.style.display = 'none';
        if (guideContainer) guideContainer.style.display = 'none';
        if (uniIntroContainer) uniIntroContainer.style.display = 'none';

        // 根据选中的菜单项显示对应的容器
        if (treeType === 'exhibition') { // 馆藏介绍
            if (collectionContainer) collectionContainer.style.display = 'block';
        } else if (treeType === 'inquiry') { // 单位概况
            if (uniIntroContainer) uniIntroContainer.style.display = 'block';
        }
    }
});